<template>
  <view>
    <StatusNav :properties="statusNavProperties"/>
    <view class='order-detail'>

      <uv-gap height="10" bgColor=""></uv-gap>
      <view v-if="orderData!==undefined">
        <!-- 1=接单者，2=发布者;3=其他-->
        <OrderList @refresh="refreshList"
                   :type="orderData.identity"
                   :datas="orderData?[orderData]:[]">
        </OrderList>
        <uv-gap height="10"/>
        <view class="order-detail-wrapper">
          <view class="order-detail-info">

            <!--                接单人信息-->
            <view class="takerinfo" v-if="orderData.takerUser">
              <view class="taker">
                <view>
                  <uv-avatar :src="orderData.takerUser.avatar"></uv-avatar>
                </view>
                <view class="takername">
                  <view style="display: flex;align-items: center">
                    <text>{{ orderData.takerUser.nickName }}</text>
                    <view style="padding: 1px 4px;border-radius: 5px;border: 1px solid #f9ae3d;color: #f9ae3d;margin-left: 5px">接单用户
                    </view>
                  </view>

                  <view>{{ orderData.takerUser.phone }}</view>
                </view>
              </view>

              <view>
                <view style="display: flex;align-items: center"
                      v-if="(orderData.state === 11 || orderData.state === 2) && orderData.takerUser.memberId === userInfo.id">
                  <view @click="phoneCall(orderData.takerUser.phone)">
                    <uv-icon size="28" :color="themConfig.theme.color" name="/static/images/phone-icon.png"></uv-icon>
                  </view>

                  <view v-if="customerShow" style="margin-left: 20px">
                    <uv-icon size="35" @click="toChat(orderData.orderNo,orderData.takerUser.memberId)" :color="themConfig.theme.color"
                             name="/static/images/msg_icon.png"></uv-icon>
                  </view>
                </view>
              </view>
            </view>

            <!--                订单信息-->
            <view class="orderinfo">
              <uv-read-more ref="readMore" closeText="查看更多" textIndent="0em" :color="themConfig.theme.color">
                <view class="title">订单信息</view>
                <view>
                  <uv-list>
                    <uv-list-item title="订单编号" :right-text="orderData.orderNo"></uv-list-item>
                    <uv-list-item v-if="orderData.memberUser.memberId==userInfo.id" title="订单金额"
                                  :right-text="orderData.amount+''"></uv-list-item>
                    <uv-list-item title="订单名称" :right-text="orderData.orderName"></uv-list-item>
                    <uv-list-item title="结算状态" :right-text="orderData.settlementState+''">
                      <template v-slot:footer>
                        <uv-tags  plain size="mini" type="primary" v-if="orderData.settlementState=='0'" text="结算中"></uv-tags>
                        <uv-tags  plain size="mini" type="" v-else-if="orderData.settlementState=='-1'" text="已取消"></uv-tags>
                        <uv-tags  plain size="mini" type="success" v-else text="已结算"></uv-tags>
                      </template>
                    </uv-list-item>
                    <uv-list-item title="支付时间" :right-text="orderData.payTime"></uv-list-item>
                    <uv-list-item title="发布时间" :right-text="orderData.createTime"></uv-list-item>
                    <uv-list-item title="接单时间" :right-text="orderData.takeTime"></uv-list-item>
                    <uv-list-item title="完成时间" :right-text="orderData.finishTime"></uv-list-item>
                    <uv-list-item title="结算时间" :right-text="orderData.settlementTime"></uv-list-item>
                    <uv-list-item v-if="orderData.state===4 || orderData.state===5" title="取消原因"
                                  :right-text="getCancelText(orderData)"></uv-list-item>
<!--                    <uv-list-item title="支付方式" :right-text="orderData.payChannel+''">-->
<!--                      <template v-slot:footer>-->
<!--                        <Dict :properties="{dictType:'pay_channel',dictValue:orderData.payChannel,size:'mini'}"/>-->
<!--                      </template>-->
<!--                    </uv-list-item>-->
                    <uv-list-item title="是否支付" :right-text="orderData.isPay+''">
                      <template v-slot:footer>
                        <Dict :properties="{dictType:'sys_boolean',dictValue:orderData.isPay,size:'mini'}"/>
                      </template>
                    </uv-list-item>
                  </uv-list>
                </view>
              </uv-read-more>
            </view>
          </view>
        </view>
      </view>
      <view v-else>
        <Empty :show="true"/>
      </view>
      <uv-gap height="10" bgColor=""></uv-gap>
    </view>
    <FloatingBackHome/>
  </view>
</template>
<script>
import {mapGetters} from "vuex";
import * as OrderApi from '@/api/school/order.js';
import OrderList from '@/components/school/orderList';
import Dict from '@/components/school/dict';
import diyJson from '@/config/diy.js';

const app = getApp();

export default {
  computed: mapGetters(['urlParams', 'userInfo']),
  components: {
    Dict,
    OrderList
  },
  data() {
    return {
      themConfig: diyJson.commonStyle,
      customerShow: false,
      statusNavProperties: { // 筛选条件
        title: "订单详情",
        setStyle: diyJson.statusbar.setStyle,
        showLeft:true,
        showHome:true
      },
      orderData: undefined,
      orderId: undefined
    };
  },
  onPullDownRefresh() {
    this.dataDetail(this.orderId);
    uni.stopPullDownRefresh();
  },
  onLoad: function (options) {
    let params = options.params;
    if (params) {
      params = JSON.parse(decodeURIComponent(params));
      this.orderId = params.orderId
      // this.dataDetail(params.orderId);

    }
  },
  onShow() {
    try {
      this.customerShow = app.globalData.applicationConfig.enableCustomer.enableCustomer;
    } catch (e) {
    }
    // console.log("params", this.orderId)
    // console.log('enableCustomer', app.globalData.applicationConfig.enableCustomer.enableCustomer)
    if (!this.orderId) {
      let orderId = null;
      let data = this.$store.state.app.urlParams;
      if (data !== undefined && data !== null) {
        console.log("urlParams", data);
        if (typeof data === 'string') {
          data = JSON.parse(data);
        }
        orderId = data.orderId;
        this.orderId = orderId
        this.dataDetail(this.orderId);
      }
    }else {
      this.dataDetail(this.orderId);
    }
  },
  methods: {
    dataDetail(id) {
      uni.showLoading({
        title: '加载中',
        mask: true
      });

      OrderApi.orderDetail(id).then(res => {
        uni.hideLoading();
        this.orderData = res.data;
        this.orderData['memberAvatar'] = res.data.memberUser.avatar;
        this.orderData['memberId'] = res.data.memberUser.memberId;
      })
    },

    // 打电话
    phoneCall(phone) {
      uni.makePhoneCall({
        phoneNumber: phone // 电话号码
      });
    },

    /**
     *
     * @param orderNo 订单编号
     * @param memberId 和对方聊天用户
     */
    toChat(orderNo, memberId) {
      let params = {
        "refId": orderNo
        , "chatType": "ORDER"
        , "groupId": ""
        , "orderInfo": {
          "orderNo": orderNo,
          "memberIds": memberId,
          "state": 0
        }
      };
      this.$store.commit('SET_JUMP_INFO', params);
      uni.navigateTo({
        url: '/pages/school/chat/window/index'
      })
    },

    getApp() {
      return app;
    },

    refreshList() {
      this.orderData = undefined;
      this.dataDetail(this.orderId);
    },

    goback() {
      // #ifdef H5
      return history.back();
      // #endif
      // #ifndef H5
      return uni.navigateBack({
        delta: 1,
      })
      // #endif
    },
    // <!-- 0=正常， 1=自主取消，2=超时未支付取消，4=管理员取消，3=超时无人接单取消,5=发布者审核拒绝 -->
    getCancelText(item) {
      if (item.cancelType === 1) {
        return '自主取消';
      } else if (item.cancelType === 2) {
        return '超时未支付取消';
      } else if (item.cancelType === 4) {
        return '平台取消';
      } else if (item.cancelType === 3) {
        return '超时无人接单取消';
      } else if (item.cancelType === 5) {
        return '拒绝接单取消';
      } else if (item.cancelType === 6) {
        return '拼团失败';
      } else {
        return ""
      }
    }

  },
  onReachBottom() {

  },
  onShareAppMessage() {
    return {
      title: '订单详情',
      path: 'pages/school/order-detail/index?params='+encodeURIComponent(JSON.stringify({orderId:this.orderId})), // 分享路径（推荐带参数）
      imageUrl: '' // 自定义分享图片（选填）
    }
  }
}
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
